<template>
  <view>
    <!-- 顶部搜索框模块 -->
		<!-- 封装抽离组件搜索框组件 -->
		<ugo-search></ugo-search>

		<!-- 轮播图模块 -->
		<view class="scroll-img">
			<swiper
				indicator-dots
				autoplay
				circular
			>
				<swiper-item v-for="item in swiperList" :key="item.goods_id">
					<image
						:src="item.image_src"
						mode="scaleToFill"
					/>
				</swiper-item>
			</swiper>
		</view>

		<!-- 导航模块 -->
		<view class="navbar">
			<!-- hover-class 属性: 点击时是否有阴影 -->
			<template v-for="item in navbarList">
				<navigator
					:key="item.name"
					v-if="item.name === '分类'"
					url="/pages/category/index"
					open-type="switchTab"
					hover-class="none"
				>
					<image
						:src="item.image_src"
						mode="scaleToFill"
					/>
				</navigator>
				<image
					v-else
					:key="item.name + 1"
					:src="item.image_src"
					mode="scaleToFill"
				/>
			</template>		
		</view>

		<!-- 楼层模块 -->
		<view class="floor" v-for="item in closeList" :key="item.floor_title.name">
			<!-- 顶部时尚女装 -->
			<view class="floor-title">
				<image
					:src="item.floor_title.image_src"
					mode="scaleToFill"
				/>
			</view>
			<!-- 优质服饰模块 -->
			<view class="floor-main">
				<!-- 为图片的 mode 属性设置为 heightFix , 就会根据图片原本的长宽比例 自动调整 -->
				<image
				  v-for="(goods) in item.product_list"
					:key="goods.name"
					:src="goods.image_src"
					mode="heightFix"
				/>
			</view>
		</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
			// 轮播图图片数据
			swiperList: [],
			// 导航栏数据
			navbarList: [],
			// 时装数据
			closeList: [],
    }
  },
	async onLoad(options) {
		this.getSwiperImageList() // 获取轮播图
		this.getNavbarList() // 获取导航栏
		this.getFashionCloseList() // 获取时装数据
	},
	// 下拉刷新时触发的钩子函数
	async onPullDownRefresh() {
		// 每次下拉刷新时, 就重新发送请求获取最新的数据
		// 由于这里需要调用 stopPullDownRefresh 方法来收起下拉刷新
		// 如果用户网络比较慢, 就可能造成请求未返回就收齐了刷新
		// 所以这里需要 通过 async await 修饰符, 等待请求返回结果之后, 再去调用方法收起下拉刷新

		// await this.getSwiperImageList() // 获取轮播图
		// await this.getNavbarList() // 获取导航栏
		// await this.getFashionCloseList() // 获取时装数据

		// 将瀑布流的串行发送请求改为并行发送请求
		// 使用 Promise.all 可以同时发送请求
		await Promise.all([this.getSwiperImageList(), this.getNavbarList(), this.getFashionCloseList()])

		// 收起下拉刷新
		uni.stopPullDownRefresh()
	},
  methods: {
		// 请求 - 获取轮播图
		async getSwiperImageList() {
			const res = await uni.$u.http.get('/home/swiperdata')
			// uni-app 内部执行了 this.setData({})方法, 修改了视图层的数据
			// console.log('轮播图数据', res);
			// 使用 $u 发送请求, 返回值是一个对象, 如果使用 uni.request 发送请求, 返回值则是一个数组, 需要结构
			this.swiperList = res.data.message
		},
		// 请求 - 获取导航栏
		async getNavbarList() {
			const res = await uni.$u.http.get('/home/catitems')
			this.navbarList = res.data.message
		},
		// 请求 - 获取时装
		async getFashionCloseList() {
			const res = await uni.$u.http.get('/home/floordata')
			this.closeList = res.data.message
		}
  }
}
</script>

<style lang="scss" scoped>

// 轮播图模块
.scroll-img {
	image {
		width: 750rpx;
		height: 340rpx;
	}
}

// 导航栏模块
.navbar {
	width: 750rpx;
	height: 160rpx;
	margin-bottom: 30rpx;
	// background-color: pink;
	display: flex;
	align-items: center;
	justify-content: space-around;

	// 导航栏模块 - navigator链接图片
	image {
		width: 128rpx;
		height: 140rpx;
	}
}

// 楼层大模块
.floor {
	display: flex;
	flex-direction: column;

	// 时尚女装
	.floor-title {
		image {
			width: 750rpx;
			height: 60rpx;
			margin-bottom: 10rpx;
		}
	}

	// 优质服饰大模块
	.floor-main {
		// 图片子类
		image {
			width: 233rpx;
			height: 188rpx;
			margin: 0 0 10rpx 12rpx;
			&:nth-child(1) {
				float: left;
				width: 233rpx;
				height: 386rpx;
			}
		}
	}
}






</style>